<template>
    <div class="savePipeAnalysisContainer" v-drag>
        <div class="savePipeAnalysisTitle drag-handle">
            <div class="title-left">
                <div class="bar"></div>
                <div class="title-text">方案保存</div>
            </div>
            <div class="title-right">
                <!-- <div  tabindex="0" class="icon">-</div> -->
                <div tabindex="0" class="icon" @click="closeDialog">×</div>
            </div>
        </div>
        <div class="savePipeAnalysisContent">
            <!-- 第一行：分析方案名称 -->
            <div class="form-row">
                <label for="analysisName">分析方案名称：</label>
                <input type="text" v-model="analysisName" placeholder="请输入分析方案名称" />
            </div>

            <!-- 第二行：分析方案备注 -->
            <div class="form-row">
                <label for="analysisRemark">分析方案备注：</label>
                <input type="text" v-model="analysisRemark" placeholder="请输入分析方案备注" />
            </div>

            <!-- 第三行：按钮 -->
            <div class="button-row">
                <button id="confirmButton" @click="sureSave">确认</button>
                <button id="cancelButton" @click="closeDialog">取消</button>
            </div>
        </div>
    </div>
</template>

<script>
import { MenuItemGroup } from 'element-ui';
import {getProject,saveProject,deleteProject,updateProject } from "@/api/EquipmentManagement.js";

export default {
    name: 'savePipeAnalysis',
    props: {
        dialogVisible: {
            type: Boolean,
            required: true,
        },
    },
    data() {
        return {
            tapMap: null,
            analysisName: '',
            analysisRemark: '',
            clickPoint: null,
            impactUserList:null,
            clickValvePoint: null,
            waterKeyWords:null,
            clickValvePoint2: null,
            secondAnalysisPoint: null,
            pipeAnalysisLine: null,
        };
    },
    computed: {
        issavePipeAnalysisShow() {
            // 返回 prop 的值
            return this.dialogVisible;
        },
    },
    mounted() {
        setTimeout(() => {
        this.tapMap= this.$store.getters.Map;
       
        this.pointLayer = this.tapMap.layer.createVectorLayer('施工点图层', {}, 3);
        this.lineLayer = this.tapMap.layer.createVectorLayer('停水线段图层', {}, 2);
      }, 1000); // 延迟 1000 毫秒（1秒）后执行
      
        
    },
    methods: {
        closeDialog() {
            this.$store.commit('setShowSaveAnalysis', false);
        },
        sureSave() {
            this.clickPoint = this.$store.getters.clickPoint;
            this.impactUserList=this.$store.getters.clickPoint;
            this.clickValvePoint = this.$store.getters.clickValvePoint;
            this.waterKeyWords=this.$store.state.waterKeyWords;
            this.clickValvePoint2 = this.$store.getters.clickValvePoint2;
            this.secondAnalysisPoint = this.$store.getters.secondAnalysisPoint;
            this.pipeAnalysisLine = this.$store.getters.pipeAnalysisLine;
            let params={
                name: this.analysisName,
                remark: this.analysisRemark,
                constructionSite: JSON.stringify(this.clickPoint),
                closeValvePointUp: JSON.stringify(this.clickValvePoint),
                closeValvePointDown: JSON.stringify(this.clickValvePoint2),
                secondCloseValvePoint:JSON.stringify(this.secondAnalysisPoint),
                closeValveLine: JSON.stringify(this.pipeAnalysisLine),
                keywordsList:JSON.stringify(this.waterKeyWords),
            };
            saveProject(params).then((res) => {
                if(res.code==200){
                this.$message({
                    type: 'success',
                    message: res.message,
                });
            }
    this.closeDialog();
            
});
            console.log(
                this.clickPoint,
                '施工点',
                this.clickValvePoint,
                '关阀点',
                this.secondAnalysisPoint,
                '二次分析点',
                this.pipeAnalysisLine,
                '管线分析线'
            );

          
            
              
        },
    },
};
</script>

<style lang="scss" scoped>
.savePipeAnalysisContainer {
    width: 25vw;
    color: white;
    position: absolute;
    top: 18vh;
    right: 45vw;
    height: 46vh;
    z-index: 2;
    .savePipeAnalysisTitle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        font-size: 1rem;
        background-color: #285383;
        .title-left,
        .title-right {
            display: flex;
            align-items: center;
        }
        .bar {
            width: 5px; /* 小竖条的宽度 */
            height: 20px; /* 小竖条的高度 */
            background-color: white; /* 小竖条的颜色 */
            margin-right: 10px; /* 小竖条和文字之间的间距 */
        }
        .icon {
            width: 20px; /* 小方框的宽度 */
            height: 20px; /* 小方框的高度 */
            // border: 1px solid #4998f2; /* 小方框的边框 */
            margin-left: 5px; /* 小方框之间的间距 */
        }
        .icon:hover {
            color: #4998f2;
        }
        .icon:focus {
            color: #4998f2;
        }
    }
    .savePipeAnalysisContent {
        background-color: #285383;
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
    }

    .form-row {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    .form-row label {
        margin-right: 10px;
        white-space: nowrap;
    }

    .form-row input {
        flex-grow: 1;
    }

    .button-row {
        display: flex;
        justify-content: center;
    }

    .button-row button {
        margin-left: 10px;
    }
}
</style>
